<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index - My ASP.NET Application</title>
    <link href="Content/bootstrap.css" rel="stylesheet"/>
	<link href="Content/site.css" rel="stylesheet"/>

	<link href="Content/site.css" rel="stylesheet"/>
	<link href="Content/style.css" rel="stylesheet"/>

    <script src="Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
	<!--
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/Home">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/Home">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
        			<li><a href="/Account/Register" id="registerLink">Register</a></li>
        			<li><a href="/Account/Login" id="loginLink">Log in</a></li>
    			</ul>
            </div>
        </div>
    </div>
	-->
    <div class="container body-content">

		<div class="row">
		    <div id="left" class="col-md-7">
		        <div id="row-txtDisplay" class="row">
		            <input class="form-control" type="text" id="txtDisplay" readonly />
		        </div>


		        <div id="read-horizontal" class="row">


		            <img id="h_symbols" src="Images/horizontal/h_symbols.PNG" />

		            <div class="row">

		                <div id="a" class="col-md-1">
		                    <p class="h_number">1</p>
		                    <p class="h_number">2</p>
		                    <p class="h_number">3</p>
		                    <p class="h_number">4</p>
		                    <p class="h_number">5</p>
		                    <p class="h_number">6</p>
		                </div>

		                <div id="h-controls" class="col-md-11">

		                    <div id="h-control-1" class="control h-control">

		                        <img id="h-BZO" data-typeTest="BZO" class="h-control-image control-image" src="Images/horizontal/line.PNG" />
		                        <img id="h-BAR" data-typeTest="BAR" class="h-control-image control-image" src="Images/horizontal/line.PNG" />		                        
		                        <img id="h-Control1" data-typeTest="Control1" class="h-control-image control-image" src="Images/horizontal/line.PNG" />

		                        <p class="h-control-title BZO">1:BZO</p>
		                        <p class="h-control-title BAR">2:BAR</p>

		                    </div><!-- /#h-control-1-->

		                    <div id="h-control-2" class="control h-control">

		                        <img id="h-COC" data-typeTest="COC" class="h-control-image control-image" src="Images/horizontal/line.PNG" />
		                        <img id="h-THC" data-typeTest="THC" class="h-control-image control-image" src="Images/horizontal/line.PNG" />		                        
		                        <img id="h-Control2" data-typeTest="Control2" class="h-control-image control-image" src="Images/horizontal/line.PNG" />

		                        <p class="h-control-title COC">1:COC</p>
		                        <p class="h-control-title THC">2:THC</p>

		                    </div><!-- /#h-control-2-->

		                    <div id="h-control-3" class="control h-control">
		                        <img id="h-MET" data-typeTest="MET" class="h-control-image control-image" src="Images/horizontal/line.PNG" />
		                        <img id="h-OPI" data-typeTest="OPI" class="h-control-image control-image" src="Images/horizontal/line.PNG" />		                        
		                        <img id="h-Control3" data-typeTest="Control3" class="h-control-image control-image" src="Images/horizontal/line.PNG" />

		                        <p class="h-control-title MET">1:MET</p>
		                        <p class="h-control-title OPI">2:OPI</p>

		                    </div><!-- /#h-control-3-->

		                    <div id="h-control-4" class="control h-control">

		                        <img id="h-MTD" data-typeTest="MTD" class="h-control-image control-image" src="Images/horizontal/line.PNG" />
		                        <img id="h-TCA" data-typeTest="TCA" class="h-control-image control-image" src="Images/horizontal/line.PNG" />		                        
		                        <img id="h-Control4" data-typeTest="Control4" class="h-control-image control-image" src="Images/horizontal/line.PNG" />

		                        <p class="h-control-title MTD">1:MTD</p>
		                        <p class="h-control-title TCA">2:TCA</p>

		                    </div><!-- /#h-control-4-->

		                    <div id="h-control-5" class="control h-control">

		                        <img id="h-OXY" data-typeTest="OXY" class="h-control-image control-image" src="Images/horizontal/line.PNG" />
		                        <img id="h-MDMA" data-typeTest="MDMA" class="h-control-image control-image" src="Images/horizontal/line.PNG" />		                        
		                        <img id="h-Control5" data-typeTest="Control5" class="h-control-image control-image" src="Images/horizontal/line.PNG" />

		                        <p class="h-control-title OXY">1:OXY</p>
		                        <p class="h-control-title MDMA">2:MDMA</p>

		                    </div><!-- /#h-control-5-->

		                    <div id="h-control-6" class="control h-control">

		                        <img id="h-PCP" data-typeTest="PCP" class="h-control-image control-image" src="Images/horizontal/line.PNG" />
		                        <img id="h-AMP" data-typeTest="AMP" class="h-control-image control-image" src="Images/horizontal/line.PNG" />		                        
		                        <img id="h-Control6" data-typeTest="Control6" class="h-control-image control-image" src="Images/horizontal/line.PNG" />

		                        <p class="h-control-title PCP">1:PCP</p>
		                        <p class="h-control-title AMP">2:AMP</p>

		                    </div><!-- /#h-control-6-->

		                </div>
		            </div>
		        </div><!-- /#read-vertical -->



		        <div id="read-vertical" class="row">

		            <div id="v_numbers">
			            <p class="v_number">1</p>
			            <p class="v_number">2</p>
			            <p class="v_number">3</p>
			            <p class="v_number">4</p>
			            <p class="v_number">5</p>
			            <p class="v_number">6</p>
		            </div> 

		            <div id="vertical" class="row">

		                <div id="v_symbols" class="col-md-1">
		                    <img src="Images/vertical/v_symbols.PNG" />
		                </div>

		                <div id="v-controls" class="col-md-11">

		                    <div id="v-control-1" class="control v-control">

		                    	<p class="v-control-title BAR"><span class="v-text">2:BAR</span></p>
		                        <p class="v-control-title BZO"><span class="v-text">1:BZO</span></p>                        
		                        <div class="separate"></div>

		                        <img id="v-Control1" data-typeTest="Control1" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-BAR" data-typeTest="BAR" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-BZO" data-typeTest="BZO" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                    </div><!-- /#v-control-1-->

		                    <div id="v-control-2" class="control v-control">

		                    	<p class="v-control-title THC"><span class="v-text">2:THC</span></p>
		                        <p class="v-control-title COC"><span class="v-text">1:COC</span></p>

		                        <div class="separate"></div>

		                        <img id="v-Control2" data-typeTest="Control2" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-THC" data-typeTest="THC" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-COC" data-typeTest="COC" class="v-control-image control-image" src="Images/vertical/line.PNG" />

		                    </div><!-- /#v-control-2-->

		                    <div id="v-control-3" class="control v-control">

		                    	<p class="v-control-title OPI"><span class="v-text">2:OPI</span></p>
		                        <p class="v-control-title MET"><span class="v-text">1:MET</span></p>

		                        <div class="separate"></div>

		                        <img id="v-Control3" data-typeTest="Control3" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-OPI" data-typeTest="OPI" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-MET" data-typeTest="MET" class="v-control-image control-image" src="Images/vertical/line.PNG" />

		                    </div><!-- /#v-control-3-->

		                    <div id="v-control-4" class="control v-control">

		                    	<p class="v-control-title TCA"><span class="v-text">2:TCA</span></p>
		                        <p class="v-control-title MTD"><span class="v-text">1:MTD</span></p>

		                        <div class="separate"></div>

		                        <img id="v-Control4" data-typeTest="Control4" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-TCA" data-typeTest="TCA" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-MTD" data-typeTest="MTD" class="v-control-image control-image" src="Images/vertical/line.PNG" />

		                    </div><!-- /#v-control-4-->

		                    <div id="v-control-5" class="control v-control">

		                    	<p class="v-control-title MDMA"><span class="v-text">2:MDMA</span></p>
		                        <p class="v-control-title OXY"><span class="v-text">1:OXY</span></p>

		                        <div class="separate"></div>

		                        <img id="v-Control5" data-typeTest="Control5" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-MDMA" data-typeTest="MDMA" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-OXY" data-typeTest="OXY" class="v-control-image control-image" src="Images/vertical/line.PNG" />

		                    </div><!-- /#v-control-5-->

		                    <div id="v-control-6" class="control v-control">

		                    	<p class="v-control-title AMP"><span class="v-text">2:AMP</span></p>
		                        <p class="v-control-title PCP"><span class="v-text">1:PCP</span></p>

		                        <div class="separate"></div>

		                        <img id="v-Control6" data-typeTest="Control6" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-AMP" data-typeTest="AMP" class="v-control-image control-image" src="Images/vertical/line.PNG" />
		                        <div class="v-control-separate"></div>

		                        <img id="v-PCP" data-typeTest="PCP" class="v-control-image control-image" src="Images/vertical/line.PNG" />

		                    </div><!-- /#v-control-6-->

		                    <div style="clear: left"></div>

		                </div>

		            </div> 
		        </div><!-- /#read-vertical -->

		        <div class="row">
		        	<div id="common-controls">
		        		<div class="common-control-box">
		        			<p class="common-control-title">Cr</p>
		        			<p data-typeTest="Cr" id="Cr" class="common-control"></p>
		        			<!-- <img src="Images/Abnormal_Bl.PNG"> -->
		        		</div>
		        		<div class="common-control-box">
		        			<p class="common-control-title">Ni</p>
		        			<p data-typeTest="Ni" id="Ni" class="common-control"></p>
		        		</div>
		        		<div class="common-control-box">
		        			<p class="common-control-title">pH</p>
		        			<p data-typeTest="pH" id="pH" class="common-control"></p>
		        		</div>
		        		<div class="common-control-box">
		        			<p class="common-control-title">Bl</p>
		        			<p data-typeTest="Bl" id="Bl" class="common-control"></p>
		        		</div>
		        		<div class="common-control-box">
		        			<p class="common-control-title">S.G</p>
		        			<p data-typeTest="SG" id="SG" class="common-control"></p>
		        		</div>        		
		        	</div>
		        </div>
		    </div>

		    <div class="col-md-4">
		    	<div id="patient-information">
			    	<h4>Patient Information</h4>
			    	<form id="form-patient" class="form-horizontal" role="form">
			    		<div class="form-group">
				    		<label class="col-sm-2 control-label" for="name">Name:</label>
				    		<div class="col-sm-10">
				    			<input class="form-control input-sm" id="name" name="name" type="text" />
				    		</div>
			    		</div>
			    		<div class="form-group">
				    		<label class="col-sm-2 control-label" for="ID">ID:</label>
				    		<div class="col-sm-10">
				    			<input class="form-control input-sm" id="ID" name="ID" type="text" />
				    		</div>		    		
			    		</div>		    		
			    	</form>
		    	</div>
		    </div>
		</div>

		<div class="col-md-1"></div>

        <img data-direction="1" id="btn-rotate" src="Images/horizontal/btn_rotate.PNG" />
        <img id="btn-next" src="Images/btn_next.PNG" />
    </div>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <script src="Scripts/bootstrap.js"></script>
	<script src="Scripts/respond.js"></script>

	<script type="text/javascript" src="Scripts/OOP/EObservation.js"></script>
	<script type="text/javascript" src="Scripts/OOP/ETest.js"></script>
	<script type="text/javascript" src="Scripts/OOP/Test.js"></script>
	<script type="text/javascript" src="Scripts/OOP/CommonTest.js"></script>
	<script type="text/javascript" src="Scripts/OOP/Display.js"></script>
	<script type="text/javascript" src="Scripts/OOP/HighLight.js"></script>
	<script type="text/javascript" src="Scripts/OOP/CommonHighLight.js"></script>
	<script type="text/javascript" src="Scripts/OOP/EObservationRules.js"></script>
	<script type="text/javascript" src="Scripts/OOP/TestClick.js"></script>
	<script type="text/javascript" src="Scripts/OOP/CommonTestClick.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$("#btn-rotate").click(function () {

			// alert("clicked");
			//1 - vertical
			//0 - horizontal

			if($(this).attr("data-direction") == 0)
			{
								
				$(this).attr("data-direction", 1);
				$(this).attr("src", "Images/horizontal/btn_rotate.PNG");

				$("#read-horizontal").hide();
				$("#read-vertical").show();
			}// end if
			else
			{
				
				$(this).attr("data-direction", 0);
				$(this).attr("src", "Images/vertical/btn_rotate.PNG");

				$("#read-vertical").hide();
				$("#read-horizontal").show();								
			}// end else
		});// end click
	});// end ready
	</script>


	</body>
</html>